<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Web Telemetry Debugger</title>
    <link rel="stylesheet" href='../static/css/style.css'/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" >
  </head>
  <body>
    <h1>Debugger</h1>
    
    <h2>实时视频</h2>
    <ul class="video_link">
      {% for name in video_names %}
      <!--这里用了视频流的的超链接,不需要访问视频的时候可以减少流量-->>
      <li><a href="/video/{{name}}">{{ name }}</a></li>
      {% endfor %}
    </ul>

    <hr>
    <br>

    <!-- 调参部分 -->>
    <h2>参数设置</h2>
    
    <h3>上位机参数</h3>
    <ul>
      {% for name, param in pc_params_info %}
      <li>
        <span> {{ name }} </span>
        <input id="range_{{ name }}" , type="range" ,
               min="{{ param.min_value }}" ,
               max="{{ param.max_value }}" ,
               step="{{ param.step_value }}" ,
               value="{{ param.current_value }}" ,
               onchange="range_onchange('{{ name }}')">
        <span id="value_{{ name }}"> {{ param.current_value }} </span>
      </li>
      {% endfor %}
    </ul>

    <br>

    <h3>下位机参数</h3>
    <ul>
      {% for name, param in plc_params_info %}
      <li>
        <span> {{ name }} </span>
        <input id="range_{{ name }}" , type="range" ,
               min="{{ param.min_value }}" ,
               max="{{ param.max_value }}" ,
               step="{{ param.step_value }}" ,
               value="{{ param.current_value }}" ,
               onchange="range_onchange('{{ name }}')">
        <span id="value_{{ name }}"> {{ param.current_value }} </span>
      </li>
      {% endfor %}
    </ul>
    <br>

    
    
  <hr>
  <p> copyright 2021 HITCRT VISION</p>
  <script type="text/javascript">
      function range_onchange(name) {
          var value = document.getElementById("range_" + name).value;
          document.getElementById("value_" + name).innerHTML = value;
          var xml = new XMLHttpRequest();
          xml.open("get", "/setting/" + name + "?current_value=" + value);
          xml.send();
      }
  
      function button_onclick(name) {
          var xml = new XMLHttpRequest();
          xml.open("get", "/button/" + name);
          xml.send();
      }
  
      function checkbox_onclick(name) {
          var checked = document.getElementById("checkbox_" + name).checked;
          var xml = new XMLHttpRequest();
          xml.open("get", "/checkbox/" + name + "?checked=" + checked);
          xml.send();
      }
  
  </script>
  </body>
</html>